<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blogList.css">
    <link rel="stylesheet" type="text/css" href="css/load.css">
</head>
<body>
    <!--    导航栏-->
    <div class="nav">
        <img src="image/person_Blog.png" alt="">
        <span>我的博客主页</span>
        <div class="spacer"></div>
        <a href="list.html">主页</a>
        <a href="edit.html">写博客</a>
        <a id="deleteUser">注销</a>
        <a href="logout" id="loginOut">退出</a>
    </div>
    <div class="search">
        <input type="text" placeholder="请输入查找内容" name="search" id="searchInput">
        <img src="./image/search.png" id="search">
    </div>
    <!--    页面版心-->
    <div class="container">
        <!--        左侧个人信息-->
        <div class="left">
            <div class="card">
                <div id="loader" style="display: none">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <a href="upload.html"><img id="picture"></a>
                <button id="change">随机生成头像</button>
                <h3 id="name"></h3>
                <a href="" id="github">我的 github 地址</a>
                <div class="counter">
                    <div class="article">
                        <div>我的文章</div>
                        <div id="count"></div>
                    </div>
                    <div class="type">
                        <div>分类</div>
                        <div id="type">1</div>
                    </div>
                </div>
            </div>
        </div>

        <!--        右侧内容-->
        <div class="right">
        </div>
        </div>

    </div>

    <script src="jquery.js"></script>
    <script src="common.js"></script>
    <script src="search.js"></script>
    <script>
        getUserInfo("list.html");
    </script>
    <script>

        // 基于Ajax获取页面信息
        $.ajax({
            type: 'get',
            url: 'list',
            success: function (body) {
                // 获取的每个对象就是一个js对象
                let right = document.querySelector(".right");
                right.innerHTML = '';// 清空原有的
                for(let blog of body){
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';
                    // 构造标题
                    let titleDiv = document.createElement('div');
                    titleDiv.innerHTML = blog.title;
                    titleDiv.className = 'title';
                    blogDiv.appendChild(titleDiv);

                    // 构造发布时间
                    let dateDiv = document.createElement('div');
                    dateDiv.innerHTML = blog.postTime;
                    dateDiv.className = 'date';
                    blogDiv.appendChild(dateDiv);
                    // 构造摘要
                    let descDiv = document.createElement('div');
                    descDiv.innerHTML = blog.content;
                    descDiv.className = 'desc';
                    blogDiv.appendChild(descDiv);

                    // 构造查看全文
                    let a = document.createElement('a');
                    a.innerHTML = '查看全文 &gt;&gt;';
                    // 跳转时,需要知道是哪篇博客
                    a.href = 'blogDetail.html?blogId=' + blog.blogId;
                    blogDiv.appendChild(a);

                    // 挂到right上
                    right.appendChild(blogDiv);
                }
            },
            error: function () {
                alert("获取页面失败!");
            }
        });

        let article = document.querySelector(".card .article");
        let searchTable = document.querySelector(".search");
        article.onclick = function () {
            $.ajax({
                type: 'get',
                url: 'user' + "?count=yes",
                success: function (body) {
                    searchTable.style.display = 'none';
                    let right = document.querySelector(".right");
                    right.innerHTML = '';// 清空原有的
                    for (let blog of body){
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 构造标题
                        let titleDiv = document.createElement('div');
                        titleDiv.innerHTML = blog.title;
                        titleDiv.className = 'title';
                        blogDiv.appendChild(titleDiv);

                        // 构造发布时间
                        let dateDiv = document.createElement('div');
                        dateDiv.innerHTML = blog.postTime;
                        dateDiv.className = 'date';
                        blogDiv.appendChild(dateDiv);
                        // 构造摘要
                        let descDiv = document.createElement('div');
                        descDiv.innerHTML = blog.content;
                        descDiv.className = 'desc';
                        blogDiv.appendChild(descDiv);

                        // 构造查看全文
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文 &gt;&gt;';
                        // 跳转时,需要知道是哪篇博客
                        a.href = 'blogDetail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a);
                        // 挂到right上
                        right.appendChild(blogDiv);
                    }
                }
            })
        }

        let deleteUser = document.querySelector("#deleteUser");
        deleteUser.onclick = function () {
            var flag = confirm("确定要注销该用户吗?");
            if (flag === true){
                $.ajax({
                    type: 'post',
                    url: 'user' + "?delete=yes",
                    success: function () {
                        alert("注销成功!");
                        location = 'login.html';
                    },
                    error: function () {
                        alert("网络错误 请重试!");
                    }
                })
            }
        }

        // 更换头像
        let change = document.querySelector("#change");
        change.onclick = function () {
            $.ajax({
                type: 'post',
                url: 'user' + "?change=yes",
                beforeSend: function(){
                    $("#loader").show();
                },
                success:function(body){
                    if ("wait" == body){
                        alert("点击太快了 请稍后再试")
                    }else {
                        location.reload();// 刷新页面
                    }
                },
                complete: function () {
                    $("#loader").hide();
                }
            })
        }
    </script>

</body>
</html>